﻿
@{
    ViewData["Title"] = "文章详情";
    Layout = "~/Views/Shared/_Layout.cshtml";
    List<IVBlog.Models.Remark> remarks = ViewBag.remarks as List<IVBlog.Models.Remark>;
}
@*<style>
        body {
            position: relative;
        }
    </style>*@
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="~/tinymce/tinymce.min.js"></script>
<script src="~/tinymce/langs/zh-Hans.js"></script>

<script type="text/javascript">

    $(function () {

        tinymce.init({
            selector: '#txtContent',
            language: "zh-Hans",
            readonly: true,
            branding: false,
            contextmenu_never_use_native: true,
            toolbar: false,
            menubar: false,
            statusbar: false,
            plugins: "autoresize",
        });

    });  //end page ready

</script>
<div class="row">
    <!--主内容区-->
    <div class="col-sm-8 offset-md-2">
        <!--面包屑导航-->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="~/Home/Index">首页</a></li>
                @if (TempData["type"]!=null)
                {
                    <li class="breadcrumb-item"><a href="~/Home/Privacy">分类</a></li>
                    <li class="breadcrumb-item"><a href="~/Home/Type/@TempData["type"]">@TempData["typeName"]</a></li>
                }
                <li class="breadcrumb-item active" aria-current="page">正文</li>
            </ol>
        </nav>
        <!--文章正文-->
        <div class="card">
            <div class="card-header bg-white">
                <h1>@ViewBag.aName</h1>
            </div>
            <div class="card-body">
                <textarea id="txtContent" name="txtContent">@ViewBag.aContent</textarea>
            </div>
            <div class="card-footer bg-white">
                @*<p>文章版权声明部分</p>*@
                <div class="card">
                    <div class="card-body text-center">
                        <p>文章转载请声明文章出处</p>
                    </div>
                </div>
                <hr />
                <!--文章页脚组件-->
                <div class="card">
                    <div class="card-body text-center">
                        @*<button type="button" class="btn btn-danger"><i class="bi bi-suit-heart">赞赏</i></button>*@
                        <button type="button" class="btn btn-primary in" id="like" onclick="Like(this,@ViewBag.aID)">
                            <i class="bi bi-hand-thumbs-up">点赞</i>
                        </button>
                        <button type="button" class="btn btn-danger btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="已经点过赞啦o(￣▽￣)ｄ" id="relike" style="display:none">
                            <i class="bi bi-hand-thumbs-up-fill">已赞</i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <br />
        <div class="card">
            <div class="card-header bg-white text-center">
                <p id="hitokoto_text">:D 一言获取中...</p>
                <p>评论内容审核后显示，评论后刷新页面您刚刚评论的内容可能会隐藏哦，不必重复评论 😁</p>
            </div>
            @if (TempData["state"]==null)
            {
                <div class="card-body">
                    <h5><i class="bi bi-chat-square-dots"></i>&nbsp;&nbsp;文章评论部分</h5>
                    <hr />
                    <form action="/Home/RemarkSubmit" method="post">
                        <div class="form-row">
                            <input style="display:none;" name="id" value="@ViewBag.aID">
                            <div class="col">
                                <input type="text" name="txtName" class="form-control" data-toggle="tooltip" title="姓名(昵称)" placeholder="姓名(昵称)">
                            </div>
                            <div class="col">
                                <input type="text" name="txtEmail" class="form-control" data-toggle="tooltip" title="邮箱" placeholder="邮箱">
                            </div>
                            <div class="col">
                                <input type="text" name="txtWeb" class="form-control" data-toggle="tooltip" title="网站或博客" placeholder="网站或博客">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">写下您的评论吧！~~</label>
                            <textarea class="form-control" id="exampleFormControlTextarea1" name="txtContent"
                                  data-toggle="tooltip" title="(*^▽^*)有什么想说的" rows="3" placeholder="说点什么"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">提交评论！</button>
                    </form>
                </div>
            }else
            {
                <div class="card-body">
                    <h5><i class="bi bi-chat-square-dots"></i>&nbsp;&nbsp;文章评论部分</h5>
                    <hr />
                    <h4>@TempData["state"]</h4>
                </div>
            }
            @foreach (var item in remarks)
            {
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-1 text-center">
                                <a class="header_logo">
                                    <img src="https://ui-avatars.com/api/?background=random&name=@(item.RnickName)" class="logo_img" alt="头像┗( ´・∧・｀)┛" />
                                </a>
                            </div>
                            <div class="col-sm-11">
                                <div>
                                    @item.RnickName
                                    &nbsp;<span class="badge badge-secondary">@item.Rtime</span>
                                </div>
                                <div>@item.Rcontent</div>
                                <div>
                                    @*<a href="" class="btn" data-toggle="tooltip" title="o(￣▽￣)ｄ点赞"><i class="bi bi-heart"></i></a>*@
                                    <button class="btn" type="button" data-toggle="collapse" data-target="#E@(item.RemarkId)"
                                        aria-expanded="false" aria-controls="collapseExample">
                                        <i class="bi bi-chat-left"></i>
                                    </button>
                                </div>
                                <div class="collapse" id="E@(item.RemarkId)">
                                    <div class="card-body">
                                        <form action="/Home/Reply" method="post">
                                            <input style="display:none;" name="Remarkid" value="@item.RemarkId">
                                            <div class="form-row">
                                                <div class="col">
                                                    <input type="text" name="replyName" class="form-control" data-toggle="tooltip" title="姓名(昵称)" placeholder="姓名(昵称)">
                                                </div>
                                                <div class="col">
                                                    <input type="text" name="replyEmail" class="form-control" data-toggle="tooltip" title="邮箱" placeholder="邮箱">
                                                </div>
                                                <div class="col">
                                                    <input type="text" name="replyWeb" class="form-control" data-toggle="tooltip" title="网站或博客" placeholder="网站或博客">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleFormControlTextarea1">写下您的评论吧！~~</label>
                                                <textarea class="form-control" id="exampleFormControlTextarea1" name="replyContent"
                                                      data-toggle="tooltip" title="(*^▽^*)有什么想说的" rows="3" placeholder="说点什么"></textarea>
                                            </div>
                                            <button type="submit" class="btn btn-primary">提交评论！</button>
                                        </form>
                                    </div>
                                </div>
                                <br />
                                @foreach (var list in item.Reply)
                                {
                                    @if (list.ReplyState == 1)
                                    {
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-sm-1 text-center">
                                                        <a href="#" class="header_logo">
                                                            <img src="https://ui-avatars.com/api/?background=random&name=@(list.ReplyNickName)" class="logo_img" alt="头像┗( ´・∧・｀)┛" />
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-11">
                                                        <div>
                                                            @list.ReplyNickName
                                                            @*&nbsp;<a href="" data-toggle="tooltip" title="o(￣▽￣)ｄ点赞"><i class="bi bi-heart"></i></a>*@
                                                            &nbsp;<span class="badge badge-secondary">@list.ReplyTime</span>
                                                        </div>
                                                        <div>@list.ReplyContent</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <br />
                                    }
                                }   
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
    <!--侧边栏-->
    @*<div class="col-sm-4">
        <div class="card sticky-top" style="top:80px;">
            <div class="card-header text-center bg-white">
                <h5 class="card-title"><i class="bi bi-card-list"></i>&nbsp;文章目录</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    <a href="#list-item-1" class="list-group-item list-group-item-action active">
                        文章标题1
                    </a>
                    <a href="#list-item-2" class="list-group-item list-group-item-action">文章标题2</a>
                    <a href="#list-item-3" class="list-group-item list-group-item-action">文章标题3</a>
                </div>
            </div>
        </div>
    </div>*@
</div>



@section Scripts{
    <script>
        $(function () {
            $('[data-toggle="popover"]').popover()
        });
        function Like(obj,aID) {
            $.ajax({
                type: 'post',
                url: '/Home/Like/' + aID,
                success: function () {
                    $('#like').hide();  
                    $('#relike').show();
                },
                error: function () {
                    //layer.msg("修改失败", { icon: 2 });
                }
            });
        };
        
    </script>
}


